<template>
  <div class="app-container">
    <div class="search-bar">
      <div class="flex-x-between mb-10px">
        <div>
          <el-form ref="queryFormRef" :model="queryParams" :inline="true">
            <!-- 搜索词 -->
            <el-form-item label="中药名/药效/部位">
              <el-input
                v-model="queryParams.searchWords"
                placeholder="请输入中药名/药效/部位，多个用逗号隔开，如:黄芪,补气"
                title="请输入中药名/药效/部位，多个用逗号隔开，如:黄芪,补气"
              />
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="handleQuery">
                <template #icon><Search /></template>
                搜索
              </el-button>
              <el-button @click="handleResetQuery">
                <template #icon><Refresh /></template>
                重置
              </el-button>
            </el-form-item>
          </el-form>
        </div>
        <div>
          <el-form :inline="true">
            <el-form-item label="高亮词组">
              <el-input
                v-model="highlightWords"
                title="多个用 “|” 隔开,例如：咳|舌红"
                placeholder="多个用 “|” 隔开,例如：咳|舌红"
              />
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>

    <el-card shadow="never">
      <el-table
        ref="dataTableRef"
        v-loading="loading"
        :data="pageData"
        highlight-current-row
        border
      >
        <el-table-column width="70" label="序号">
          <template #default="scope">
            <span class="index">
              {{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}
            </span>
          </template>
        </el-table-column>

        <el-table-column prop="titleCn" label="文章标题" min-width="150">
          <template #default="scope">
            <span class="clickable-title" @click="handleTitleClick(scope.row)">
              {{ scope.row.titleCn }}
            </span>
          </template>
        </el-table-column>

        <el-table-column
          key="articleId"
          label="处方名称"
          prop="tcmName"
          min-width="120"
          align="center"
        />

        <el-table-column label="药效特征" prop="sentence" min-width="650">
          <template #default="{ row }">
            <div
              style="white-space: pre-line"
              v-html="row.sentence.map((s: string) => highlightText(s)).join('\n')"
            ></div>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-if="total > 0"
        v-model:total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="handleQuery()"
      />
    </el-card>

    <!-- ArtcleInfo 组件 -->
    <ArticleInfo
      ref="articleInfoRef"
      :id="articleId"
      :visible="dialogVisible"
      @close="dialogVisible = false"
    ></ArticleInfo>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: "Effectiveness",
  inheritAttrs: false,
});

import StatisticsAPI, {
  EffectivenessPageVO,
  EffectivenessPageQuery,
} from "@/api/project/statistics";

const queryFormRef = ref(ElForm);
const dataFormRef = ref(ElForm);
const highlightWords = ref("");
const loading = ref(false);
const total = ref(0);

const queryParams = reactive<EffectivenessPageQuery>({
  searchWords: "",
  pageNum: 1,
  pageSize: 10,
});

// 表格数据
const pageData = ref<EffectivenessPageVO[]>([]);

/** 查询 */
function handleQuery() {
  loading.value = true;
  StatisticsAPI.getEffectivenessAnalysisPage(queryParams)
    .then((data) => {
      pageData.value = data.list;
      total.value = data.total;
    })
    .finally(() => {
      loading.value = false;
    });
}

/** 重置查询 */
function handleResetQuery() {
  queryFormRef.value!.resetFields();
  queryParams.pageNum = 1;
  handleQuery();
}

const articleId = ref(0);
const dialogVisible = ref(false);
const articleInfoRef = ref();
// 打开详情弹窗
function handleTitleClick(row: any) {
  articleId.value = row.articleId;
  dialogVisible.value = true;
}

// 高亮方法
function highlightText(text: string) {
  if (!highlightWords.value) return text; // 如果没有关键词，直接返回

  const keywords = highlightWords.value.split("|").filter((k) => k.trim());
  if (keywords.length === 0) return text;

  // 用正则匹配关键词，并添加高亮样式
  const regex = new RegExp(`(${keywords.join("|")})`, "g");
  return text.replace(regex, '<span class="highlight">$1</span>');
}

watch(
  () => highlightWords.value,
  (newVal) => {
    if (newVal) {
      pageData.value = [...pageData.value]; // 重新赋值触发响应式更新
    }
  },
  { deep: true }
);

onMounted(() => {
  //handleQuery();
});
</script>
